<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      label-position="right"
      label-width="auto"
    >
      <div class="title_2">客户查询</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="custName">
            <el-input
              v-model="queryParams.custName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码类型" prop="certType">
            <el-select
              v-model="queryParams.certType"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in certTypeOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="certNo">
            <el-input
              v-model="queryParams.certNo"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="组织机构代码" prop="orgType">
            <el-select
              v-model="queryParams.orgType"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in orgTypeOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经营状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-form-item>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <div class="title_2">客户列表</div>
    <el-row v-if="custList.length" v-loading="loading">
      <el-col :span="24">
        <el-collapse v-model="activeNames">
          <el-collapse-item
            v-for="item in custList"
            :key="item.id"
            :name="item.id"
          >
            <template #title>
              <el-space>
                <span class="collapse_title">{{ item.custName }}</span>
              </el-space>
              <el-space>
                <span class="collapse_title">{{ item.certNo }}</span>
              </el-space>
              <el-space v-if="item.flag.includes(1)">
                <el-tag>团车</el-tag>
              </el-space>
              <el-space v-if="item.flag.includes(2)">
                <el-tag type="success">重客</el-tag>
              </el-space>
              <el-space v-if="item.flag.includes(3)">
                <el-tag type="danger">企客</el-tag>
              </el-space>
              <el-space>
                <el-button size="small" type="primary" @click.stop="setCustData(item)"
                  >选择</el-button
                >
              </el-space>
            </template>
            <div>
              <el-descriptions
                title=""
                :column="2"
                label-align="right"
                :border="true"
              >
                <el-descriptions-item label="组织机构代码" label-align="right">
                  <span>{{ item.orgNo }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="企业类型" label-align="right">
                  <span>{{ item.type }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="注册地址" label-align="right">
                  <span>{{ item.address }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="法人代表" label-align="right">
                  <span>{{ item.legalRepresentative }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="所属一级行业" label-align="right">
                  <span>{{ item.industryOne }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="所属二级行业" label-align="right">
                  <span>{{ item.industryTwo }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="VIP编码" label-align="right">
                  <span>{{ item.vipCode }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="存潜标识" label-align="right">
                  <span>{{ item.label }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="客户级别" label-align="right">
                  <span>{{ item.custLevel }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="总部管理处室" label-align="right">
                  <span>{{ item.section }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="操作" label-align="right">
                  <el-button size="small" plain>工商信息</el-button>
                  <el-button size="small" plain>客户视图</el-button>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <div v-else>
      <el-empty description="无数据" />
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-row justify="center">
        <el-button @click="submit" :disabled="!isSelected" icon="Position" type="primary">确定</el-button>
    </el-row>
  </div>
</template>
  
<script setup name="SelectCustom">
import { computed, reactive, toRaw } from 'vue';

const emits = defineEmits(['confirm']);
const activeNames = ref(["1", "2"]);
// 客户选择逻辑-start
let custData = reactive({})
const isSelected = ref(false)
const setCustData = row => {
  custData = row
  isSelected.value = !!row.id
}
const submit = () => {
  const obj = {
    ...toRaw(custData)
  }
  emits("confirm", obj);
}
// 客户选择逻辑-end

// 列表查询逻辑-start
const certTypeOptions = ref([
  { label: "统一社会信用代码", value: 1 },
  { label: "组织机构代码", value: 2 },
]);
const orgTypeOptions = ref([{ label: "全部", value: "" }]);
const statusOptions = ref([
  { label: "全部", value: "" },
  { label: "有效", value: "1" },
  { label: "无效", value: "0" },
]);
const custList = ref([]);
const loading = ref(true);
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    custName: "",
    certType: "",
    certNo: "",
    orgType: "",
    status: "",
  },
});
const { queryParams } = toRefs(data);
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    custList.value = [
      {
        id: "1",
        flag: [1, 2],
        custName: "中国联调集团河北省通信有限责任公司",
        certNo: "911300006010425130",
        orgNo: "7789901290",
        type: "有限责任公司",
        address: "河北省石家庄市长安区",
        legalRepresentative: "张XX",
        industryOne: "信息传输、软件和信息技术服务业",
        industryTwo: "电信、广播电视和卫星",
        vipCode: "VIP0000000000001390",
        label: "存量客户",
        custLevel: "重客二级",
        section: "大型商业客户一处",
      },
      {
        id: "2",
        flag: [1, 3],
        custName: "中国联调集团河北省通信有限责任公司",
        certNo: "911300006010425130",
        orgNo: "7789901290",
        type: "有限责任公司",
        address: "河北省石家庄市长安区",
        legalRepresentative: "张XX",
        industryOne: "信息传输、软件和信息技术服务业",
        industryTwo: "电信、广播电视和卫星",
        vipCode: "VIP0000000000001390",
        label: "存量客户",
        custLevel: "重客二级",
        section: "大型商业客户一处",
      },
      {
        id: "3",
        flag: [3, 4],
        custName: "中国联调集团河北省通信有限责任公司",
        certNo: "911300006010425130",
        orgNo: "7789901290",
        type: "有限责任公司",
        address: "河北省石家庄市长安区",
        legalRepresentative: "张XX",
        industryOne: "信息传输、软件和信息技术服务业",
        industryTwo: "电信、广播电视和卫星",
        vipCode: "VIP0000000000001390",
        label: "存量客户",
        custLevel: "重客二级",
        section: "大型商业客户一处",
      },
      {
        id: "4",
        flag: [1, 4],
        custName: "中国联调集团河北省通信有限责任公司",
        certNo: "911300006010425130",
        orgNo: "7789901290",
        type: "有限责任公司",
        address: "河北省石家庄市长安区",
        legalRepresentative: "张XX",
        industryOne: "信息传输、软件和信息技术服务业",
        industryTwo: "电信、广播电视和卫星",
        vipCode: "VIP0000000000001390",
        label: "存量客户",
        custLevel: "重客二级",
        section: "大型商业客户一处",
      },
      {
        id: "5",
        flag: [1],
        custName: "中国联调集团河北省通信有限责任公司",
        certNo: "911300006010425130",
        orgNo: "7789901290",
        type: "有限责任公司",
        address: "河北省石家庄市长安区",
        legalRepresentative: "张XX",
        industryOne: "信息传输、软件和信息技术服务业",
        industryTwo: "电信、广播电视和卫星",
        vipCode: "VIP0000000000001390",
        label: "存量客户",
        custLevel: "重客二级",
        section: "大型商业客户一处",
      },
      {
        id: "6",
        flag: [2, 3],
        custName: "中国联调集团河北省通信有限责任公司",
        certNo: "911300006010425130",
        orgNo: "7789901290",
        type: "有限责任公司",
        address: "河北省石家庄市长安区",
        legalRepresentative: "张XX",
        industryOne: "信息传输、软件和信息技术服务业",
        industryTwo: "电信、广播电视和卫星",
        vipCode: "VIP0000000000001390",
        label: "存量客户",
        custLevel: "重客二级",
        section: "大型商业客户一处",
      },
    ];
    total.value = Number(custList.value.length);
    loading.value = false;
  }, 300);
};
const queryRef = ref(null);
const resetQuery = (formEl) => {
    queryRef.value.resetFields();
    getList();
};
getList();
// 列表查询逻辑-end
</script>
  <style lang="scss" scoped>
.collapse_title {
  font-size: 14px;
}
</style>
  